<template>
  <div class="body">
    <div class="header">
      大屏幕设置demo
    </div>
    <div class="container fy-flex fy-flex__center">
      <div class="editor" @click="goToPage(0)">
        进入后台
      </div>
      <div class="screen" @click="goToPage(1)">
        进入大屏
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  name: "home",
  components: {},
  methods: {
    goToPage(msg) {
      if (msg) {
        this.$router.push({
          name: "screen",
          params: {
            navArray: [
              {
                id: 0,
                name: "nav时间"
              },
              {
                id: 1,
                name: "nav信息"
              }
            ],
            componentsArray: [
              {
                id: 2,
                name: "基础&信息"
              },
              {
                id: 3,
                name: "地图&警报"
              },
              {
                id: 4,
                name: "监控&设备"
              }
            ]
          }
        });
      } else {
        this.$router.push("/editor");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.body {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.header {
  position: relative;
  width: 100vw;
  height: 10vh;
  background: #051753;
  font-size: 5rem;
  line-height: 10vh;
  color: white;
  text-align: center;
}
.container {
  margin-top: 10vh;
  position: relative;
  width: 100vw;
  height: 60vh;
  .editor,
  .screen {
    margin: 10rem 10vw;
    width: 40rem;
    height: 30rem;
    color: white;
    font-size: 5rem;
    line-height: 30rem;
    cursor: pointer;
    background: #051753;
    &:active {
      opacity: 0.7;
    }
  }
}
.footer {
  position: relative;
  width: 100vw;
  height: 20vh;
}
</style>
